<!doctype html>
<html>
    <head>
        <title>HT 快速查询器手册</title>
        <meta charset="UTF-8">    
        <meta name="viewport" content="user-scalable=yes, width=1024">
        <style type="text/css"> 
            h1, h2, h3, h4, h5, h6, p, blockquote {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
                font-size: 13px;
                line-height: 18px;
                color: #737373;
                background-color: white; 
                margin: 10px 13px 10px 13px;
            }
            table {
                margin: 10px 0 15px 0;
                border-collapse: collapse;
            }
            td,th {	
                border: 1px solid #ddd;
                padding: 3px 10px;
            }
            th {
                padding: 5px 10px;	
            }
            a {
                color: #0069d6;
            }
            a:hover {
                color: #0050a3;
                text-decoration: none;
            }
            a img {
                border: none;
            }
            p {
                margin-bottom: 9px;
            }
            h1, h2, h3, h4, h5, h6 {
                color: #404040;
                line-height: 36px;
            }
            h1 {
                margin-bottom: 18px;
                font-size: 30px;
            }
            h2 {
                font-size: 24px;
            }
            h3 {
                font-size: 18px;
            }
            h4 {
                font-size: 16px;
            }
            h5 {
                font-size: 14px;
            }
            h6 {
                font-size: 13px;
            }
            hr {
                margin: 0 0 19px;
                border: 0;
                border-bottom: 1px solid #ccc;
            }
            blockquote {
                padding: 13px 13px 21px 15px;
                margin-bottom: 18px;
                font-family:georgia,serif;
                font-style: italic;
            }
            blockquote:before {
                content:"\201C";
                font-size:40px;
                margin-left:-10px;
                font-family:georgia,serif;
                color:#eee;
            }
            blockquote p {
                font-size: 14px;
                font-weight: 300;
                line-height: 18px;
                margin-bottom: 0;
                font-style: italic;
            }
            code, pre {
                font-family: Monaco, Andale Mono, Courier New, monospace;
            }
            code {
                background-color: #fee9cc;
                color: rgba(0, 0, 0, 0.75);
                padding: 1px 3px;
                font-size: 12px;
                border-radius: 3px;
            }
            pre {
                display: block;
                padding: 14px;
                margin: 0 0 18px;
                line-height: 16px;
                font-size: 11px;
                border: 1px solid #d9d9d9;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            pre code {
                background-color: #fff;
                color:#737373;
                font-size: 11px;
                padding: 0;
            }
            sup {
                font-size: 0.83em;
                vertical-align: super;
                line-height: 0;
            }
            * {
                -webkit-print-color-adjust: exact;
            }
            @media screen and (min-width: 914px) {
                body {
                    width: 854px;
                    margin:10px auto;
                }
            }
            @media print {
                body,code,pre code,h1,h2,h3,h4,h5,h6 {
                    color: black;
                }
                table, pre {
                    page-break-inside: avoid;
                }
            }                        
            iframe{
                width: 100%;
                border: 1px solid #34495E;
                margin: 0;                
            }            
            .logo{
                vertical-align: middle;
            }

        </style>        
        <script>
            function init() {
                var logoSrc = '',
                    logos = document.querySelectorAll('.logo'),
                    i = 0;
                for (; i < logos.length; i++) {
                    logos[i].src = logoSrc;
                }
                
                var iframes = document.querySelectorAll('iframe'),
                    func = function(){};
                for (i=0; i < iframes.length; i++) {
                    var iframe = iframes[i];
                    
                    // a small hack to make it work on android
                    iframe.ontouchstart = func;
                    
                    var div = document.createElement('div');
                    div.innerHTML = '<a href="' + iframe.src + '" target="_blank">独立运行→</a>';
                    iframe.parentNode.insertBefore(div, iframe);
                }   
            }
        </script>    
    </head>
    <body onload="init();">
        <a href="http://www.hightopo.com"><img class="logo"></a>HT 快速查询器手册
        <hr style="margin: 1px 0 20px 0">
<p>索引</p>

<ul><li><a href="#ref_description">概述</a></li><li><a href="#ref_demo">示例</a></li></ul>

<hr/>

<div id="ref_description"></div>

<h3>概述</h3>

<p><code>DataModel</code>中<code>Data</code>非常多的情况下，查询某属性为某特定值的<code>Data</code>需要遍历整个<code>DataModel</code>，会造成很大的性能开销，
<code>QuickFinder</code>为<code>DataModel</code>中所有<code>Data</code>的特定属性建立<code>map</code>(映射表)，可以显著提高查询速度，举个例子：</p>

<pre><code>var quickFinder = ht.QuickFinder(dataModel, &quot;name&quot;);</code></pre>

<p>这段代码中创建了一个<code>QuickFinder</code>并绑定了<code>name</code>属性，假如<code>DataModel</code>中有<code>10</code>个<code>Data</code>，前<code>5</code>个<code>Data</code>的<code>name</code>为<code>name1</code>，
后<code>5</code>个<code>Data</code>的<code>name</code>为<code>name2</code>，则此<code>quickFinder</code>内部维护的<code>map</code>中包含两个键值对，第一个<code>key</code>为<code>name1</code>，<code>value</code>为一个集合(包含<code>DataModel</code>中前<code>5</code>个<code>Data</code>)，
第二个<code>key</code>为<code>name2</code>，<code>value</code>为一个集合(包含<code>DataModel</code>中后<code>5</code>个<code>Data</code>)，当我们调用下面的<code>API</code>查询时：</p>

<pre><code>var nodes = quickFinder.find(&quot;name1&quot;);</code></pre>

<p><code>quickFinder</code>直接把第一个键值对的值(包含前<code>5</code>个<code>Data</code>的集合)返回，无需遍历整个<code>DataModel</code>。
而且，这个<code>quickFinder</code>一旦建立，<code>DataModel</code>的任何变化都会影响它，比如新增<code>Data</code>或删除<code>Data</code>或<code>Data</code>的属性发生了变化，
<code>quickFinder</code>内部的映射表都会随之更新。假如您的项目中经常需要用到某个属性查询(比如<code>name</code>)，可以在全局创建一个<code>QuickFinder</code>，在需要查询的地方即可使用这个快速查询器来提高性能。</p>

<p>有两个使用误区需要注意：</p>

<ul><li>每次需要查询时都重新构建<code>QuickFinder</code>：这样做毫无意义，因为构建的过程也会遍历整个<code>DataModel</code>建立映射表</li><li>快速查询器不再使用时没有调用<code>dispose()</code>方法：快速查询器内部监听了<code>DataModel</code>，以便<code>DataModel</code>发生变化时及时更新映射表，因此如果查询器不再使用，
一定要调用<code>dispose()</code>方法销毁监听，避免发生内存泄露</li></ul>

<p>使用此插件需要引入<code>ht-quickfinder.js</code>：</p>

<pre><code>&lt;script src=&quot;ht.js&quot;&gt;&lt;/script&gt; &lt;!--先引入ht.js--&gt;
&lt;script src=&quot;ht-quickfinder.js&quot;&gt;&lt;/script&gt;</code></pre>

<p>在上面的代码中已经介绍了构造函数参数中的前两个参数，下面是完整的参数列表：</p>

<ul><li><code>dataMode</code> 此查询器要绑定的<code>DataModel</code></li><li><code>propertyName</code> 指定此查询器要根据<code>Data</code>的哪个属性建立映射表</li><li><code>accessType</code> 指定<code>propertyName</code>的类型，枚举如下：<ul><li><code>null</code>： 默认类型，如<code>propertyName</code>为<code>age</code>，采用<code>getAge()</code>的方式读取</li><li><code>style</code>：如<code>propertyName</code>为<code>age</code>，采用getStyle(&#39;age&#39;)的方式读取</li><li><code>attr</code>：如<code>propertyName</code>为<code>age</code>，采用<code>getAttr(&#39;age&#39;)</code>的方式读取</li></ul></li><li><code>valueFunc</code> 指定取值方式，如要读取的属性值为<code>js</code>对象，可以用此参数返回<code>js</code>对象的唯一标识(映射表的<code>key</code>只能为字符串)</li><li><code>filterFunc</code> 过滤器函数，过滤掉不想查询的<code>Data</code></li></ul>

<p>查询器上常用方法如下：</p>

<ul><li><code>find(key)</code> 根据关键字<code>key</code>查询<code>Data</code>，返回<code>ht.List</code>实例</li><li><code>findFirst(key)</code> 根据关键字<code>key</code>找到第一个匹配的<code>Data</code>并返回</li><li><code>dispose()</code> 销毁此快速查询器</li></ul>

<div id="ref_demo"></div>

<h3>示例</h3>

<p>这是一个测试用例，请注意控制台输出，如果测试没通过会拋出异常信息：</p>

<p><iframe src="examples/example_test.html" style="height:10px"></iframe></p>    <hr id="contact" style="margin: 20px 0 1px 0">
    <a href="http://www.hightopo.com"><img class="logo"></a>欢迎交流 <a href="mailto:service@hightopo.com">service@hightopo.com</a>
</body>
</html>
